import { Object3D } from "../objects/Object3D";
import { post } from "../utils/Client";
import { MapKey, Mapper } from "../utils/Map";
import { defineReactive } from "../utils/Observe";

/**UI */
class ViewUI extends Object3D{
  /**背景图片地址  支持本地地址和网络地址 */
  @Mapper("backgroundImagePath")
  backgroundImage: string;
  /**背景颜色  混合颜色 */
  @Mapper("backgroundColor")
  backgroundColor: string;
  /**滑动到按钮的混合颜色 */
  @Mapper("butttonHoverColor")
  hoverColor: string;
  /**鼠标离开按钮的混合颜色 */
  @Mapper("buttonLeaveColor")
  leaveColor: string;
  /**widget宽度 */
  @Mapper("widgetWidth")
  width: number;
  /**widget高度 */
  @Mapper("widgetHeight")
  height: number;
  /**开启/关闭内置点击  默认为true */
  @Mapper("openWindowEvent")
  enableEvent: boolean;
  constructor(options?: any) {
    super()
    ViewUI.prototype.isViewUI = true;
    Mapper.map(this, options);
    Object.keys(this).forEach((propertyKey) => {
      defineReactive(this, propertyKey, (value, key) => {
        const { property } = Reflect.getMetadata(MapKey, this, key);
        this.putProperty(propertyKey, propertyKey, false, property);
      });
    });
  }
  private putProperty(prop, key, expand?, alias?) {
    if (expand) {
      post("preview_viewui", {
        ...this[prop],
        guid: this.guid,
        key: "viewui_alter",
      });
    } else {
      post("preview_viewui", {
        [alias || prop]: this[prop],
        guid: this.guid,
        key: "viewui_alter",
      });
    }
  }
  /**获取所有ui信息 */
  static getUIInfoSync(): Promise<Array<ViewUI>> {
    return post("preview_viewui", {
      key: "get",
    }).then((res) => {
      return res.list;
    });
  }
  /**
   * 根据guid获取ui信息
   * @param guid 
   * @returns 
   */
  static getUISync(guid: string): Promise<ViewUI> {
    return post("preview_viewui", {
      guid,
      key: "get",
    }).then((res) => {
      return res;
    });
  }
}

export { ViewUI };
